<template>
  <!-- zi -->
  <!-- <img
    src="https://yanxuan.nosdn.127.net/static-union/16607924415e76bf.png?type=webp&amp;imageView&amp;thumbnail=750x0&amp;quality=75"
    data-reactid=".0.0.0.1.0.2.0"> -->
  <!-- 头部值得买导航栏 -->
  <div class="swiperTab">
    <div class="swiperTab-a">
      <!-- 左边第一个图标 -->
      <div class="tubiao1">
        <svg t="1682405314656" class="icon-f" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2823">
          <path
            d="M96 480c-9.6 0-19.2-3.2-25.6-12.8-12.8-12.8-9.6-35.2 3.2-44.8l377.6-310.4c35.2-25.6 86.4-25.6 118.4 0l377.6 307.2c12.8 9.6 16 32 3.2 44.8-12.8 12.8-32 16-44.8 3.2L531.2 166.4c-9.6-6.4-28.8-6.4-38.4 0L115.2 473.6c-6.4 6.4-12.8 6.4-19.2 6.4zM816 928H608c-19.2 0-32-12.8-32-32v-150.4c0-22.4-38.4-44.8-67.2-44.8-28.8 0-64 19.2-64 44.8V896c0 19.2-12.8 32-32 32H211.2C163.2 928 128 892.8 128 848V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304c0 9.6 6.4 16 19.2 16H384v-118.4c0-64 67.2-108.8 128-108.8s131.2 44.8 131.2 108.8V864h176c9.6 0 16 0 16-19.2V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304C896 896 864 928 816 928z"
            fill="3b3b3b" p-id="2824"></path>
        </svg>
      </div>
      <div class="zhidm">值得买</div>
      <!--  右边俩图标，放大镜-购物车  -->
      <div class="fdgu">
        <svg t="1682406368836" id="aaa" class="u-icon-cart" viewBox="0 0 1024 1024" version=".5"
          xmlns="http://www.w3.org/2000/svg" p-id="3790" width="100" height="100">
          <path d="M809.246403 771.926938 777.737782 803.458071 924.965961 950.667831 956.476629 919.157163Z"
            fill="#3b3b3b" p-id="3791"></path>
          <path
            d="M454.878536 70.285786C239.51556 70.285786 64.93236 244.847497 64.93236 460.231963c0 215.341486 174.583201 389.945153 389.945153 389.945153 215.362976 0 389.9472-174.603667 389.9472-389.945153C844.825736 244.847497 670.241512 70.285786 454.878536 70.285786zM454.878536 805.611108c-190.750415 0-345.381192-154.626683-345.381192-345.379145 0-190.751439 154.629753-345.380168 345.381192-345.380168 190.752462 0 345.382215 154.62873 345.382215 345.380168C800.259728 650.983401 645.630998 805.611108 454.878536 805.611108z"
            fill="#3b3b3b" p-id="3792"></path>
        </svg>
        <svg t="1682420788230" viewBox="0 0 1024 1024" version=".5" xmlns="http://www.w3.org/2000/svg" p-id="2706"
          width="100" height="100">
          <path
            d="M1007.4 225.7c-4.6-5.9-11.7-9.7-19.2-9.7L201.2 216 167.8 40.5C165.6 29 155.5 21 143.7 21L34 21C20.5 21 9.6 32 9.6 45.5S20.5 70 34 70l89.5 0L155 245.4c0 0.1 0 0.2 0 0.4l98.8 513.6C256 770.9 267 779 278.7 779l587.2 0c13.5 0 24.5-11 24.5-24.5s-11-24.5-24.5-24.5L298.9 730l-15.1-77.2 612.3 3.2c0 0 0 0 0 0 11.3 0 21.2-9.5 23.8-20.5l92-389C1013.7 239.1 1012 231.5 1007.4 225.7zM876.8 603.7l-602.3-1.2-44.6-233.9L210.5 266l746.8 0L876.8 603.7z"
            fill="#231815" p-id="2707"></path>
          <path
            d="M353.1 829.4c-47.2 0-85.6 38.4-85.6 85.6s38.4 85.6 85.6 85.6c47.2 0 85.6-38.4 85.6-85.6S400.3 829.4 353.1 829.4zM353.1 951.8c-20.2 0-36.7-16.5-36.7-36.7 0-20.2 16.5-36.7 36.7-36.7 20.2 0 36.7 16.5 36.7 36.7C389.8 935.3 373.3 951.8 353.1 951.8z"
            fill="#231815" p-id="2708"></path>
          <path
            d="M769 829.4c-47.2 0-85.6 38.4-85.6 85.6s38.4 85.6 85.6 85.6c47.2 0 85.6-38.4 85.6-85.6S816.3 829.4 769 829.4zM769 951.8c-20.2 0-36.7-16.5-36.7-36.7 0-20.2 16.5-36.7 36.7-36.7 20.2 0 36.7 16.5 36.7 36.7C805.7 935.3 789.3 951.8 769 951.8z"
            fill="#231815" p-id="2709"></path>
        </svg>
      </div>
    </div>
  </div>
  <!-- zi -->




  <div class="container">
    <div class="div">
      <div class="swiperTab-title">
        <div class="positionImg">
          <img src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg" alt="">
        </div>
        <img src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" class="u-title">
        <div class="u-text">严选好物&nbsp;用心生活</div>

      </div>
      <div class="nav_container">
        <div class="nav_list_wrap">
          <swiper :slidesPerView="4" :grid="{
              rows: 2,
            }" :spaceBetween="5" :pagination="{
      clickable: true,
    }" :modules="modules" class="mySwiper">
            <swiper-slide v-for="item in buyBannerList" :key="item.id">
              <div class="nav_list">
                <img :src="item.picUrl" alt="">
                <h3>{{ item.mainTitle }}</h3>
                <p>{{ item.viceTitle }}</p>
              </div>
            </swiper-slide>
          </swiper>

        </div>
      </div>
      <div class="product_list_container">
        <div class="product_list">
          <div class="product_list_item" v-for="item in recAuto" :key="item.topicId">
            <img class="item_banner" :src="item.picUrl">
            <router-link to="/shaidan"><p>{{ item.title }}</p></router-link>
            <div class="detail">
              <div class="userInfo">
                <img class="avatar" src="http://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png" alt="">
                <span>毫无打赏</span>
              </div>
              <div class="area">
                <img class="icon_png" src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt="">
                <span>220k</span>
              </div>
            </div>
          </div>
        </div>

        <div class="product_list">
          <div class="product_list_item" v-for="item in recAuto" :key="item.topicId">
            <img class="item_banner" :src="item.picUrl">
            <p>{{ item.title }}</p>
            <div class="detail">
              <div class="userInfo">
                <img class="avatar" src="http://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png" alt="">
                <span>毫无打赏</span>
              </div>
              <div class="area">
                <img class="icon_png" src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt="">
                <span>220k</span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>
<script setup lang="ts" >
import { ref, onMounted, } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/grid';
import 'swiper/css/pagination';
import worthbuyApi from '@/api/worthbuy'
import { navListModel, topicsModel } from '@/api/worthbuy'
import { Grid, Pagination } from 'swiper';

//轮播图
const modules = ref([Grid, Pagination])

const buyBannerList = ref<navListModel[]>([])

let page = ref(1)
const size = ref(2)
//轮播图
const getBannerList = async () => {
  try {
    let result = await worthbuyApi.bannerList()
    buyBannerList.value = result.navList
  } catch (error) {
    console.log(error);
  }
}
//瀑布流
const recAuto = ref<any[]>([])
const recAutoList = ref<any[]>([])
const getRecAuto = async () => {
  try {
    let result = await worthbuyApi.recAuto(page.value, size.value)
    // console.log(result.result);
    recAutoList.value = result.result
    // console.log(recAutoList.value);

    recAutoList.value = result.result.forEach(item => item.topics.forEach(item => {
      recAuto.value.push(item)
    }))
    // console.log(recAuto.value);

  } catch (error) {
    console.log(error);
  }
}
onMounted(() => {
  getBannerList()
  getRecAuto()
})
</script>


<style lang="scss">

//-------zi----------
//头部值得买导航样式
img {
  width: 375px;
}

.swiperTab .swiperTab-a {
  width: 375px;
  height: 50px;
  padding: 0 10px;
  display: flex;
}

.zhuti .Underlay .zhidmt img {
  width: 65px;
  height: 35px;
  margin: 30px 10px 0 10px;

}

.swiperTab .swiperTab-a .zhidm {
  font-size: 18px;
  text-align: center;
  line-height: 20px;
  width: 66px;
  height: 20px;
  margin: auto;
}

.swiperTab .swiperTab-a .tubiao1 svg {
  width: 23px;
  height: 50px;
}

.swiperTab .swiperTab-a .fdgu svg {
  width: 25px;
  height: 50px;
  margin: 0 12px;
}

//-------zi----------

.product_list_container {
  background-color: #eee;
}

.u-text {
  font-size: .3rem;
  line-height: .44rem;
  height: 0.44rem;
  position: absolute;
  font-family: PingFangSC-Regular;
  left: 1.46rem;
  top: 0.79rem;
  color: #fff;
}

.u-title {
  position: absolute;
  width: 1.3rem;
  height: auto;
  top: 0.6rem;
  left: 0.12rem;
  z-index: 2;
}

.container {
  width: 100%;
  height: 100%;
  // background-color: #7f7f7f;
  // position: relative;


}

.positionImg {
  width: 375px;
  height: 259px;
  // position: absolute;

  img {
    width: 100%;
  }
}

.swiper-wrapper {
  width: 100% !important;
}

.container {
  background-color: #eee;
  position: relative;
}

.nav_container {
  // margin-top: 50px;
  background-color: #fff;
  border-radius: 10px;
  width: 355px;
  height: 250px;
  // overflow: hidden;
  margin: -190px auto 0;
  // padding-top: 10px;
  // padding-left: 10px;
}

.nav_list_wrap {
  // width: 90px;
  height: 250px;
  display: flex;
  // flex-direction: column;
  // justify-content: space-evenly;
  // flex-wrap: wrap;
  // padding: 10px 0;
  background-color: #fff;
  border-radius: 10px;
  // padding-top: 10px;

  .swiper {
    // width: 100%;
    width: 355px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    padding: 0;
    background-color: #fff;
    border-radius: 10px;

    .swiper-slide {
      width: 88px !important;
      margin: 3px 0 0 0 !important;
      padding: 0 !important;
      text-align: center;
      font-size: 18px;
      background: #fff;
      height: calc((100% - 30px) / 2) !important;

      /* Center slide text vertically */
      display: flex;
      justify-content: center;
      align-items: center;

      .nav_list {
        // margin: 0 auto;
        width: 88px;

        // height: 100px;
        // margin-bottom: 10px;
        h3 {
          margin: 0;
          padding-top: 5px;
          font-size: 14px;
          text-align: center;
        }

        img {
          display: flex;
          margin: auto;
          width: 60px;
          height: 60px;
        }

        p {
          font-size: 12px;
          margin-top: 1px;
          text-align: center;
          color: #999;
        }
      }
    }
  }
}

.product_list_container {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  // flex-direction: column;
  // flex-wrap: wrap;
  // background-color: #7f7f7f;
  // float: left;

  margin-top: 10px;

  .product_list {
    margin-bottom: 10px;
    width: 172px;
    // display: flex;
    // flex-direction: column;
    // flex-wrap: wrap;
    // justify-content: space-evenly;
    padding-bottom: 10px;

    .product_list_item {
      margin-bottom: 10px;
      width: 172px;
      background-color: #fff;
      border-radius: 10px;


      .item_banner {
        width: 172px;
        border-radius: 10px 10px 0 0;
      }

      .avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        padding-left: 3px;
        padding-right: 3px;
      }

      .icon_png {
        width: 16px;
        height: 16px;
      }

      p {
        font-size: 14px;
        color: #333;
        padding: 9px 8px 0;
        word-wrap: break-word;
      }

      .detail {
        display: flex;
        justify-content: space-between;
        margin-top: 9px;
        padding: 8px 8px 12px 0;

        span {
          font-size: 12px;
          color: #7f7f7f;
          line-height: 24px;
        }

        .userInfo {
          display: flex;
        }

        .area {
          display: flex;
          height: 16px;
          margin-top: 5px;

          span {
            line-height: 16px;
          }
        }
      }
    }
  }
}</style>
